<!--
 * @Descripttion:
 * @Author: liujing
 * @Date: 2021-09-24 09:33:54
 * @LastEditTime: 2021-09-24 14:08:47
-->
<template>
  <div class="contain">
    <div class="tableShow">
      <p class="title">表格信息展示</p>
    </div>
    <div class="uploadShow">
      <p class="title">上传文件</p>
      <div style="margin-left:250px">
        <el-upload
          ref="upload"
          action="none"
          drag
          accept=".xls, .xlsx"
          :on-change="handleChange"
          :on-remove="handleRemove"
          :file-list="fileList"
          :http-request="uploadFile"
          :auto-upload="false"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            将文件拖到此处，或<em>点击选择文件</em>
          </div>
        </el-upload>
      </div>

      <el-button type="primary" @click="submitUpload" class="submitBtn"
        >点击上传</el-button
      >
    </div>
  </div>
</template>

<script>
export default {
  name: 'sensitiveDataUpload',
  data () {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ],
      fileList: [] // 多文件上传的文件列表数组
    }
  },
  mounted () {},
  methods: {
    headerStyle () {
      return 'background:red;fontSize:15px'
    },
    // 移除文件
    handleRemove (file, fileList) {
      this.fileList = fileList
      // return this.$confirm(`确定移除 ${ file.name }？`);
    },
    handleChange (file, fileList) {
      const existFile = fileList
        .slice(0, fileList.length - 1)
        .find(f => f.name === file.name)
      if (existFile) {
        this.$message.error('当前文件已经存在!')
        fileList.pop()
      }
      this.fileList = fileList
    },
    // 上传到服务器
    uploadFile () {},
    submitUpload () {
      if (this.fileList.length === 0) {
        this.$message({
          message: '请选择文件',
          type: 'warning'
        })
      } else {
        this.$refs.upload.submit()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.contain {
  width: 100%;
}
.tableShow {
  width: 800px;
  height: 260px;
  margin: 0 auto;
}
.uploadShow {
  width: 800px;
  height: 300px;
  margin: 0 auto;
  .submitBtn {
    margin-left: 400px;
  }
}
.title {
  font-size: 18px;
  font-weight: bold;
}
</style>
